// import React from "react";
import React from "./react";

// class Username extends React.Component{
//     constructor(props){
//         super(props)
//         this.input = React.createRef() // {current:null}

//     }
//     getFocus =()=>{
//         this.input.current.focus()
//     }
  
//     render(){
//         return (<input ref={this.input} />) //ref={this.input}
//     }
// }

function Username(props,ref){    
    let input = React.createRef()
    ref.current = {
        getFocus: ()=>{
            input.current.focus()
        }
    }

    return (<input ref={input} />) //ref={this.input}
}
const ForwardUsername = React.forwardRef(Username)
class Counter2 extends React.Component{
    constructor(props){
        super(props)
        this.usernameRef = React.createRef() // {current:null}

    }
    autoFocus =()=>{
        console.log(this.usernameRef.current);
        this.usernameRef.current.getFocus()
    }
  
    render(){
        return (<div>
         {/* <Username ref={this.usernameRef} /> */}
         <ForwardUsername ref={this.usernameRef} />
         <button onClick={this.autoFocus}>=</button>
        </div>)
    }
}

export default Counter2